<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video id="video" autoplay playsinline muted></video>
</body>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
    var vConsole = new window.VConsole();
    const ws = new WebSocket('wss://192.168.6.61:3463')
    const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection

    let id = 0
    const config = {
        sdpSemantics: "unified-plan",
        iceTransportPolicy: "all",
        iceServers: [
            {
                urls: 'stun:47.114.110.197:23478',
            }
        ]
    }
    const pc = new RTCPeerConnection(config)

    ws.addEventListener('message', (e) => {
        const msg = JSON.parse(e.data)
        const { data, event, uuid } = msg

        if (event === 'enterRoom') {
            pc.setRemoteDescription(data)
        }

        if (event === 'candidate') {
            if (msg.data) {
                pc.addIceCandidate(data.candidate)
            }
        }
    });

    pc.addEventListener('icecandidate', (e) => {
        /* const msg = {
            action: 'icecandidate',
            to: 'b',
            data: e.candidate
        } */
        const msg = {
            event: 'transfer',
            variable: {
                id: id++,
                method: 'AddSessionCandidate',
                params: {
                    sessionId: '36192a24-bd47-4590-bcaf-f49844d89cad',
                    candidate: e.candidate,
                },
            },
        }

        ws.send(JSON.stringify(msg))
    })

    pc.addEventListener('track', (e) => {
        console.log('on track')
        document.querySelector('#video').srcObject = e.streams[0]
    })

    navigator.mediaDevices.getUserMedia({
        audio: true,
    }).then(async (stream) => {

        stream.getTracks().forEach((track) => {
            pc.addTrack(track, stream)
        })

        const offer = await pc.createOffer()
        await pc.setLocalDescription(offer)

        const msg = {
            event: 'transfer',
            variable: {
                method: 'AnswerSession',
                params: {
                    sdp: pc.localDescription,
                    sessionId: '36192a24-bd47-4590-bcaf-f49844d89cad',
                },
                id: id++,
            },
        }
        ws.send(JSON.stringify(msg))
    })

    ws.send(JSON.stringify({ "id": 9999, "method": "MakeNewSession", "params": { "sessionId": "36192a24-bd47-4590-bcaf-f49844d89cad", "enableRec": false, "recMode": { "type": "A2V2" }, "recRule": "RecAiFaceInteract", "rule": "AiFaceInteract", "videoSize": { "width": 1920, "height": 1080 }, "resList": [{ "resOptions": { "type": "rtc", "enableTrickleIce": true, "enhanceOpus": false, "vpxMaxBitrate": 30000 }, "type": "center" }, { "resOptions": { "type": "aiface", "name": "aiface", "mode": "interact", "quarter": 0, "data": { "bg_img": "https://robot.guiji.ai:4433/nfs/duix-cc/background/174159074311671808.jpg", "matting": 1, "sequence": ["https://172.16.103.12/model/2021/11/02/TC-1.pm4"], "udCode": "weatherGirl0722" } }, "drawOptions": { "x": 0, "y": 0, "width": 1080, "height": 1920 }, "type": "center" }] } }))
</script>

</html>